<template>
  <div class="youke">
    <Navs left></Navs>
    <Main class="background">
      <template slot="main">

        <div class="center">
          <van-button type="info" size="small" :round="true" class="buttons" to="/team/index">邀请记录</van-button>
          <div class="jingbi"></div>
          <!--<div class="award">奖励<i>200</i>金币</div>-->
          <!--<div class="hint">每邀请1人,奖励<i>100个金币</i></div>-->
          <div class="img-box">
            <qrcode-vue :size="72" :value="qrcode" class="qrcode-vue"></qrcode-vue>
          </div>
          <van-button
            type="info"
            size="large"
            :round="true"
            style="background:#4f57e8;border:1px solid #4b4ee3;margin-top:25px;"
          >推荐码:{{codeNum}}
          </van-button>
          <div class="rule"></div>
          <div class="hintFont">用户注册完成后，需成功排单获得点位模型后，点击我的点位-点击点位-点击右上角推荐分析-复制链接向好友推荐，用户如多点排单可选择我的点位模型进行推荐。</div>
          <div class="footer">
            <van-button size="large" :round="true" class="link" @click="copys">复制链接</van-button>
          </div>
        </div>
      </template>
    </Main>
  </div>
</template>

<script type="text/ecmascript-6">
    import qrcodeVue from "qrcode-vue";
    import {guide} from "@/api";

    export default {
        //接收父级传递的参数
        props: [],
        //监听数据变化
        watch: {},
        data() {
            return {
                codeNum: "",
                qrcode: "",
                url: "",
                copyType: false
            };
        },
        //实例初始化之前触发事件
        beforeCreate() {
        },
        //实例化之后触发事件
        created() {
            this.getcodes();
        },
        //实时监控data参数数据变化
        computed: {},
        //模板组件
        components: {
            qrcodeVue
        },
        //执行方法
        methods: {
            copyFun() {
                if (this.copyType) {
                    this.$copy(this.codeNum).then(res => {
                        this.$toast("复制成功");
                    });
                }
            },
            copys() {
                if (this.copyType) {
                    this.url = "https://mof999.com/#/user/register?code=" + this.codeNum + "&point_id=" + (this.$route.query.point_id >= 0 ? this.$route.query.point_id : 0);
                    var input = document.createElement('input');
                    input.value = this.url;
                    document.body.prepend(input);
                    input.setAttribute('readOnly','readOnly');
                    input.select();
                    input.setSelectionRange(0, input.value.length);
                    input.readOnly = false;
                    let ret = false;
                    ret = document.execCommand('Copy');
                    console.log(input);
                    document.body.removeChild(input);
                    this.$toast(false === ret ? '复制失败' : '复制成功');
                    // console.log(ret);
                    // this.$copy(this.url).then(res => {
                    //     this.$toast('复制成功');
                    // }).catch(res => {
                    //     var input = document.createElement('input');
                    //     input.value = this.url;
                    //     console.log(input.value);
                    //     document.getElementById('copy-box').appendChild(input);
                    //     input.select();
                    //     input.setSelectionRange(0, input.value.length);
                    //     let ret = document.execCommand('Copy');
                    //     this.$toast(ret);
                    //     // document.getElementById('copy-box').removeChild(input);
                    //     let that = this;
                    //     setTimeout(function(){
                    //         that.$toast(!ret ? '复制失败' : '复制成功');
                    //     },1000);
                    // });
                }
            },
            getlinks() {
                if (this.copyType) {
                    if (this.$router.mode == "hash") {
                        this.qrcode = `${document.location.protocol}//${document.domain}/#/user/register?code=${this.codeNum}`;
                    } else {
                        this.qrcode = `${document.location.protocol}//${document.domain}/user/register?code=${this.codeNum}`;
                    }
                    let point_id =
                        this.$route.query.point_id >= 0 ? this.$route.query.point_id : 0;
                    this.qrcode += "&point_id=" + point_id;
                }
            },
            getcodes() {
                guide.share().then(res => {
                    if (res.code == 1000) {
                        this.codeNum = res.result;
                        this.copyType = true
                        this.getlinks();

                    }
                });
            }
        },
        mounted() {
        }
    };
    //实例初始化之前触发事件
</script>

<style scoped lang="less">
  .youke {
    background: url("") no-repeat center 46px;
    background-size: cover;
    height: 100vh;
  }

  .login-out {
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-block;
    vertical-align: middle;
    background-image: url("~@/assets/user/loginout.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  .center {
    padding: 0 10px;
    /*position: relative;*/

    .img-box {
      background-color: #ffffff;
      height: 9rem;
      width: 9rem;
      margin: 0 auto;
      margin-top: 3rem;
    }
  }

  .buttons {
    background: #4f4ce8;
    border: 1px solid #4f4ce8;
    position: absolute;
    right: 10px;
    top: 112/32rem;
  }

  .award {
    color: white;
    font-size: 64/32rem;
    text-align: center;
    margin-top: 40/32rem;

    i {
      color: #fbe169;
      font-style: normal;
    }
  }

  .jingbi {
    width: 520/32rem;
    height: 60/32rem;
    /*background: url('~@/assets/img/jingbi888.png') no-repeat center;*/
    background-size: contain;
    margin: 0 auto;
    margin-top: 120/32rem;
  }

  .hint {
    text-align: center;
    color: white;
    margin-top: 90/32rem;

    i {
      font-style: normal;
      color: #f5d221;
    }
  }

  .rule {
    width: 380/32rem;
    height: 30/32rem;
    background: url("~@/assets/img/rule888.png") no-repeat center;
    background-size: cover;
    margin: 0 auto;
    margin-top: 40/32rem;
  }

  .footer {
    height: 120/32rem;
    background: white;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }

  .link {
    display: block;
    height: 80/32rem;
    line-height: 80/32rem;
    width: 80%;
    margin: 0 auto;
    margin-top: 20/32rem;
    background: #e83626;
    color: white;
  }

  .hintFont {
    color: #c6ccf9;
    text-align: justify;
    margin-top: 2rem;
    font-size: 0.85rem;
  }

  input{
    display:none;
  }
</style>
<style lang="less">
  .qrcode-vue {
    img {
      width: 100% !important;
    }
  }
</style>
